<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .el-cascader .el-input__inner, .el-cascader .el-input {
            width: 218px;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">商品管理</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">筛选区</span>
                        <div style="float: right">
                            <el-button type="primary" @click.native.prevent="getList">查询</el-button>
                            <el-button type="primary" @click.native.prevent="clearSearch">清空查询条件</el-button>
                        </div>
                    </div>
                    <el-form ref="search" :model="search" label-width="80px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="名称搜索">
                                    <el-input v-model="search.name" placeholder="名称" style="width: 218px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="商品分类">
                                    <div class="block">
                                        <el-cascader
                                                :change-on-select="true"
                                                expand-trigger="hover"
                                                :options="options"
                                                v-model="search.types">
                                        </el-cascader>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商家">
                                    <el-select
                                            style="width: 217px"
                                            v-model="search.orgId"
                                            filterable
                                            remote
                                            placeholder="请输入关键词"
                                            :remote-method="remoteMethod"
                                            :loading="loading">
                                        <el-option
                                                v-for="item in orgList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态">
                                    <el-select v-model="search.status" placeholder="请选择状态">
                                        <el-option
                                                v-for="item in statusList"
                                                :label="item.name"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="销量">
                                    <el-input v-model="search.soldCountLow" style="width: 200px;"></el-input>&nbsp;个至&nbsp;
                                    <el-input v-model="search.soldCountHigh" style="width: 200px;"></el-input>&nbsp;个
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="积分商品">
                                    <el-radio-group v-model="search.kind" style="margin-top: 10px">
                                        <el-radio label="">全部</el-radio>
                                        <el-radio :label="1">是</el-radio>
                                        <el-radio :label="0">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
                <yiqi-examine title="商品审核" ref="examineDialog" :examine-dialog="examineDialog" :readonly="readonly" :is-item="true"
                              :result="result" :desc="desc"
                              :type-id="typeId" :save-callback="saveCallback" :cancel-callback="cancelCallback">
                    <el-form slot="content" :model="examineForm" :rules="rules" ref="spreadSaleForm" :label-width="labelWidth">
                        <el-form-item label="分销金额" prop="spreadSale">
                            <el-input v-model.number='examineForm.spreadSale' :disabled='readonly' style='width: 200px;'></el-input>
                        </el-form-item>
                    </el-form>
                </yiqi-examine>
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">商品信息列表</span>
                        <div style="float: right;">
                            <el-button type="primary" @click.native="forwardAdd" v-if="isPermission('item:add', user.permissions)">添加</el-button>
                            <el-button type="primary" @click.native="addPoints" v-if="isPermission('item:addPoint', user.permissions)">添加积分商品</el-button>
                            <el-button type="primary" @click.native="exportItem">导出</el-button>
                            <!--<el-button type="primary">导出</el-button>-->
                        </div>
                    </div>
                    <el-table
                            :data="itemList"
                            border
                            style="width: 100%">
                        <el-table-column
                                inline-template
                                label="序号"
                                width="80">
                            <div>{{ $index+pageSize*(currentPage-1)+1 }}</div>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="商品名称"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                show-overflow-tooltip
                                prop="orgName"
                                label="商家">
                        </el-table-column>
                        <el-table-column
                                prop="typeName"
                                show-overflow-tooltip
                                label="类别">
                        </el-table-column>
                        <el-table-column
                                prop="kindName"
                                label="商品种类">
                        </el-table-column>
                        <el-table-column
                                prop="soldCount"
                                label="销量">
                        </el-table-column>
                        <el-table-column
                                prop="stock"
                                label="库存">
                        </el-table-column>
                        <el-table-column
                                prop="usePoint"
                                width="120"
                                label="积分兑换数">
                        </el-table-column>
                        <el-table-column
                                prop="salePrice"
                                label="现价">
                        </el-table-column>
                        <el-table-column
                                prop="spreadSale"
                                label="分销金额">
                        </el-table-column>
                        <el-table-column
                                prop="insertTime"
                                label="创建时间"
                                width="125"
                                :formatter="formatterTime">
                        </el-table-column>
                        <!--<el-table-column-->
                                <!--prop="realName"-->
                                <!--label="创建人">-->
                        <!--</el-table-column>-->
                        <el-table-column
                                prop="statusName"
                                label="状态">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown" align="center">
                                        <el-dropdown-item v-if="isPermission('item:view', user.permissions)"><el-button size="mini" type="primary"  @click.native.prevent="detail(row)">详情</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('item:edit', user.permissions)"><el-button size="mini" type="primary" v-if="row.status !== 4 && row.status !== 2"  @click.native.prevent="edit(row)">编辑</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('item:delete', user.permissions)"><el-button size="mini" type="primary"  @click.native.prevent="confirmDeleteItem(row.id)">删除</el-button></el-dropdown-item>
                                        <el-dropdown-item>
                                            <template v-if="isPermission('item:submit', user.permissions)">
                                                <el-button size="mini" type="primary" v-if="row.status === 1 || row.status === 3"  @click.native.prevent="confirmSubmitItem(row.id)">提交</el-button>
                                            </template>
                                            <template v-if="isPermission('item:check', user.permissions)">
                                                <el-button size="mini" type="primary" v-if="row.status === 2"  @click.native.prevent="showCheckDialog(row)">审核</el-button>
                                            </template>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('item:online', user.permissions)">
                                            <el-button size="mini" type="primary" v-if="row.status === 4" @click.native.prevent="confirmDownItem(row.id)">下架</el-button>
                                            <el-button size="mini" type="primary" v-if="row.status === 5" @click.native.prevent="confirmUpItem(row.id)">上架</el-button>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount">
                    </el-pagination>
                </el-card>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>
<script src="/static/js/common.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                loading: false,
                labelWidth: '120px',
                headerNavList: list.headerNavList,
                orgList: [],
                options: [],
                statusList: [],
                examineDialog: false,
                rules: {
                    spreadSale: [
                        {required: true, message: "分销金额不能为空"},
                        {type: "number", message: "分销金额只能为数字"}
                    ]
                },
                readonly: false,
                typeId: 4,
                result: 1,
                desc: '',
                examineForm: {
                    spreadSale: ''
                },
                checkedList: [],
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                search: {
                    kind: '',
                    types: [],
                    status: '',
                    orgId: '',
                    soldCountLow: '',
                    soldCountHigh: '',
                    name: ''
                },
                itemList: [],
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                checkId: '',
                checkDialog:false
            }
        },
        mounted:function () {
            this.getList ();
            this.getStatus();
            this.getType();
        },
        methods: {
            handleCurrentPageChange(val) {
                this.currentPage = val;
                this.getList();
            },
            exportItem () {
                let typeId = this.search.types.length !== 0 ? this.search.types[this.search.types.length - 1] : "";
                window.open("/item/outPut?kind=" + this.search.kind + "&orgId=" + this.search.orgId
                            + "&typeId=" + typeId
                            + "&status=" + this.search.status + "&soldCountLow=" + this.search.soldCountLow
                            + "&soldCountHigh=" + this.search.soldCountHigh + "&name=" + this.search.name);
            },
            remoteMethod (query) {
                let that = this;
                this.loading = true;
                this.http("/org/selectList", {name: query}, function (res) {
                    if (res.status === 200) {
                        that.orgList = res.data.list;
                        that.loading = false;
                    } else {
                        that.loading = false;
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.loading = false;
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            forwardAdd () {
                window.location.href = '/item/add'
            },
            detail (row) {
                window.location.href = '/item/detail?itemId=' + row.id + "&kind=" + row.kind;
            },
            edit (row) {
                window.location.href = '/item/edit?itemId=' + row.id + "&kind=" + row.kind;
            },
            addPoints(){
                window.location.href = '/item/addPoints';
            },
            confirmUpItem (id) {
                let that = this;
                this.$confirm('此操作会将该商品上架, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.upItem(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消上架'
                    });
                });
            },
            confirmDownItem (id) {
                let that = this;
                this.$confirm('此操作会将该商品下架, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.downItem(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消下架'
                    });
                });
            },
            saveCallback () {
                let isValid = true;
                let isValid1 = true;
                let that = this;
                this.result = this.$refs.examineDialog.examineForm.result;
                this.desc = this.$refs.examineDialog.examineForm.desc;
                this.checkedList = this.$refs.examineDialog.checkTag;
                if (this.$refs.examineDialog.$refs.examineForm !== undefined) {
                    this.$refs.examineDialog.$refs.examineForm.validate(function (valid) {
                        if (!valid) {
                            isValid = false;
                        }
                    })
                }
                if (this.$refs.spreadSaleForm !== undefined) {
                    this.$refs.spreadSaleForm.validate(function (valid) {
                        if (!valid) {
                            isValid1 = false;
                        }
                    })
                }
                if (isValid && isValid1) {
                    let desc = "";
                    if (this.checkedList[0] === 999) {
                        desc = this.desc;
                    } else {
                        desc = this.checkedList.join(",");
                    }
                    let obj = {
                        contentId: this.checkId,
                        checkResult: this.result,
                        checkDesc: desc,
                        spreadSale: this.examineForm.spreadSale
                    }
                    let loading = this.$loading({fullscreen: true, lock: true});
                    this.http('/item/check',obj,function(res){
                        if(res.status === 200){
                            that.examineDialog = false;
                            if (that.$refs.spreadSaleForm !== undefined) {
                                that.$refs.spreadSaleForm.resetFields();
                            } else {
                                that.spreadSale = "";
                            }
                            that.getList();
                            loading.close();
                        }else{
                            loading.close();
                            that.$alert(res.errMsg, '提示', {
                                confirmButtonText: '确定',
                            });
                        }
                    },function (res) {
                        loading.close();
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    })
                } else {
                    this.$message.error('请完善信息');
                }
            },
            cancelCallback () {
                if (this.$refs.spreadSaleForm !== undefined) {
                    this.$refs.spreadSaleForm.resetFields();
                } else {
                    this.spreadSale = "";
                }
                this.examineDialog = false;
            },
            upItem (id) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/online", {id: id}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.getList();
                        that.$alert('上架成功','提示',{
                            confirmButtonText:'确定',
                        })
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('上架失败','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            downItem (id) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/offline", {id: id}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.getList();
                        that.$alert('下架成功','提示',{
                            confirmButtonText:'确定',
                        })
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('下架失败','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getType () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.$get("/item/type/tree", {}, function (res) {
                    if (res.status === 200) {
                        that.options = res.data.options;
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getStatus () {
                let that = this;
                this.$get("/dictionary/list/MS_ITEM_STATUS", {}, function (res) {
                    if (res.status === 100) {
                        that.statusList = res.returnValue;
                    } else {
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            clearSearch () {
                this.search = {
                    kind: '',
                    types: [],
                    status: '',
                    orgId: '',
                    soldCountLow: '',
                    soldCountHigh: '',
                    name: ''
                }
                this.getList();
            },
            getList () {
                let that = this
                let obj = {
                    kind: this.search.kind,
                    orgId: this.search.orgId,
                    typeId: this.search.types.length !== 0 ? this.search.types[this.search.types.length - 1] : "",
                    status: this.search.status,
                    soldCountLow: this.search.soldCountLow,
                    soldCountHigh: this.search.soldCountHigh,
                    name: this.search.name,
                    currentPage:this.currentPage,
                    pageSize: this.pageSize,
                    isAll: 0
                }
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                this.http('/item/list',obj,function (res) {
                    if(res.status === 200){
                        that.itemList = res.data.list;
                        that.totalCount = res.data.total;
                        loading.close();
                    }else{
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            formatterTime(row){
                if(row.insertTime !== undefined && (row.insertTime + "").length >= 10){
                    return (row.insertTime + '').substring(0,10);
                }else{
                    return row.insertTime;
                }
            },
            showCheckDialog(row){
                this.checkId = row.id;
                this.readonly = row.checkResult !== undefined ? true : false;
                this.result = row.checkResult === -1 ? 0 : 1;
                this.examineForm.spreadSale = "";
                if (this.readonly) {
                    let that = this;
                    let obj = {
                        contentId: row.id,
                        contentType: this.typeId
                    }
                    this.http("/check/getCheckInfo", obj, function (res) {
                        if (res.status === 200) {
                            if (res.data.selectCheck !== undefined) {
                                that.desc = res.data.selectCheck.checkDesc;
                            }
                            that.examineDialog = true;
                        } else {
                            that.$alert(res.errMsg, '提示', {
                                confirmButtonText: '确定',
                            });
                        }
                    }, function (res) {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    })
                } else {
                    this.examineDialog = true;
                }
            },
            confirmDeleteItem (id) {
                let that = this;
                this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.deleteItem(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            confirmSubmitItem (id) {
                let that = this;
                this.$confirm('此操作将提交该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.submitItem(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
            },
            deleteItem(id){
                let that = this
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http('/item/delete',{id:id},function (res) {
                    if(res.status === 200){
                        loading.close();
                        that.getList();
                        that.$alert('删除成功','提示',{
                            confirmButtonText:'确定',
                        })
                    }else{
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            submitItem (id) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/submit", {id: id}, function (res) {
                    if (res.status === 200) {
                        that.getList();
                        loading.close();
                        that.$alert('提交成功','提示',{
                            confirmButtonText:'确定',
                        })
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            initForm(){
                this.checkDialog = false;
                this.getList();
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>